<template>
  <div id="allmap" ref="allmap"></div>
</template>
<script>
import mapIcon from '../assets/map_icon.png'
export default {
  data() {
    return {}
  },
  methods: {
    map() {
      // 百度地图API功能
      var map = new BMap.Map('allmap') // 创建Map实例
      var point = new BMap.Point(113.30932, 23.231652)
      map.centerAndZoom(point, 11) // 初始化地图,设置中心点坐标和地图级别
      map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

      // 设置地图主题颜色
      map.setMapStyle({
        style: 'dark'
      })

      //地图类型控件
      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      )
      map.addControl(new BMap.ScaleControl()) // 比例尺控件
      map.addControl(new BMap.OverviewMapControl()) // 缩略地图控件
      // map.addControl(zoomCtrl)
      map.addControl(new BMap.NavigationControl()) // 平移缩放控件
      // 定位控件
      var locationControl = new BMap.GeolocationControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMap.Size(10, 40),
        // 是否显示定位信息面板。默认显示定位信息面板
        showAddressBar: true,
        locationIcon: new BMap.Icon(
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2981826492,1101758208&fm=26&gp=0.jpg',
          new BMap.Size(50, 50),
          {
            imageSize: new BMap.Size(50, 50)
          }
        )
      })
      map.addControl(locationControl)
      // 添加定位事件
      locationControl.addEventListener('locationSuccess', function(e) {
        var address = ''
        address += e.addressComponent.province
        address += e.addressComponent.city
        address += e.addressComponent.district
        address += e.addressComponent.street
        address += e.addressComponent.streetNumber
        alert('当前定位地址为：' + address)
      })
      locationControl.addEventListener('locationError', function(e) {
        alert(e.message)
      })

      // 城市列表控件
      var cityControl = new BMap.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMap.Size(80, 5)
      })
      // 将控件添加到地图上
      map.addControl(cityControl)

      var mapPoints = [
        { x: 113.359987, y: 22.130022 },
        { x: 113.31289, y: 23.226309 },
        { x: 113.335307, y: 23.147922 }
      ]
      // 函数 创建多个标注
      function markerFun(points, infoBox) {
        // 创建自定义图标
        var myIcon = new BMap.Icon(mapIcon, new BMap.Size(110, 75), {
          imageSize: new BMap.Size(110, 75)
        })
        var markers = new BMap.Marker(points, {
          icon: myIcon
        })
        map.addOverlay(markers)
        // 点标记添加点击事件
        markers.addEventListener('click', function(event) {
          infoBox.open(markers)
        })

        markers.setAnimation(BMAP_ANIMATION_BOUNCE) // 跳动动画 - BMAP_ANIMATION_BOUNCE   坠落动画 - BMAP_ANIMATION_DROP
      }

      for (var i = 0; i < mapPoints.length; i++) {
        var points = new BMap.Point(mapPoints[i].x, mapPoints[i].y) //创建坐标点
        var html = [
          "<div class='infoBoxContent'><div class='title'><strong>中海雅园</strong><span class='price'>均价43000</span></div>",
          "<div class='list'><ul><li><div class='left'><img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=194525120,147259706&fm=26&gp=0.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园南北通透四居室</a><p>4室2厅，205.00平米，3层</p></div><div class='rmb'>760万</div></li>",
          "<li><div class='left'><img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=194525120,147259706&fm=26&gp=0.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园四居室还带保姆间</a><p>2室1厅，112.00平米，16层</p></div><div class='rmb'>300万</div></li>",
          "<li><div class='left'><img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=194525120,147259706&fm=26&gp=0.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>《有钥匙 随时看》花园水系</a><p>3室2厅，241.00平米，16层</p></div><div class='rmb'>400万</div></li>",
          "<li><div class='left'><img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=194525120,147259706&fm=26&gp=0.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城D区正规楼王大三居</a><p>3室3厅，241.00平米，17层</p></div><div class='rmb'>600万</div></li>",
          "<li class='last'><div class='left'><img src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=194525120,147259706&fm=26&gp=0.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城豪，身份人士的象征</a><p>4室2厅，213.90平米，25层</p></div><div class='rmb'>700万</div></li>",
          '</ul></div>',
          '</div>'
        ]
        // 创建信息窗口
        var infoBox = new BMapLib.InfoBox(map, html.join(''), {
          offset: new BMap.Size(50, 50),
          boxStyle: {
            // background: "#ccc",
            width: '270px',
            height: '300px'
          },
          closeIconMargin: '10px 2px 0 0',
          // closeIconUrl: imgUrl,
          enableAutoPan: true,
          align: INFOBOX_AT_TOP
        })

        markerFun(points, infoBox)
      }
    }
  },
  mounted() {
    //调用上面个的函数
    this.map()
  }
}
</script>

<style lang="less" scoped>
/*设置地图的宽高*/
#allmap {
  height: 100vh;
}
// 隐藏左下角版权信息
/deep/ .BMap_cpyCtrl {
  display: none;
}
// /deep/ .anchorBL {
//   display: none;
// }
/deep/ .infoBoxContent {
  font-size: 12px;
  background-color: #ccc;
}
/deep/ .infoBoxContent .title {
  background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3657344823, 1518770836&fm=26&gp=0.jpg') no-repeat;
  background-position: 50% 50%;
  height: 42px;
  width: 272px;
}
/deep/ .infoBoxContent .title strong {
  font-size: 14px;
  line-height: 42px;
  padding: 0 10px 0 5px;
}
/deep/ .infoBoxContent .title .price {
  color: pink;
}
/deep/ .infoBoxContent .list {
  width: 268px;
  border: solid 1px #4fa5fc;
  border-top: none;
  background: #fff;
  height: 260px;
}
/deep/ .infoBoxContent .list ul {
  margin: 0;
  padding: 5px;
  list-style: none;
}
/deep/ .infoBoxContent .list ul li {
  float: left;
  width: 255px;
  border-bottom: solid 1px #4fa5fc;
  padding: 2px 0;
}
/deep/ .infoBoxContent .list ul .last {
  border: none;
}
/deep/ .infoBoxContent .list ul img {
  width: 53px;
  height: 42px;
  margin-right: 5px;
}
/deep/ .infoBoxContent .list ul p {
  padding: 0;
  margin: 0;
}
/deep/ .infoBoxContent .left {
  float: left;
}
/deep/ .infoBoxContent .rmb {
  float: right;
  color: #eb6100;
  font-size: 14px;
  font-weight: bold;
}
/deep/ .infoBoxContent a {
  color: #0041d9;
  text-decoration: none;
}
</style>
